<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="Add.dialogFormVisible = true" type="primary" icon="document">新建账号</el-button>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<!-- 表格主体 -->
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button @click="checkDetail(scope.row)" size="small">查看</el-button>
						<el-button @click="modify(scope.row)" size="small">修改</el-button>
						<el-button @click="resetPwd(scope.row)" size="small">重置密码</el-button>
						<el-button @click="forbidden(scope.row)" size="small">{{scope.row.status==1? '停用':'启用'}}</el-button>
						<el-button @click="deleteBtn(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center width="500px">
			<el-form ref="addform" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				<el-form-item label="姓名" prop="realName">
					<el-input v-model.trim="Add.data.form['realName']" class="h-40 w-200" :maxlength="255" placeholder="请输入姓名"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="mobile">
					<el-input v-model.trim="Add.data.form['mobile']" prop="mobile" class="h-40 w-200" :maxlength="255" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item label="角色名" prop="roleId">
					<el-select v-model="Add.data.form['roleId']" placeholder="选择角色名" class="w-200">
						<el-option v-for="option in Add.data.selectData['roleId']" prop="roleId" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="部门">
					<el-select v-model="Add.data.form['roleId']" disabled placeholder="选择部门" class="w-200">
						<el-option v-for="option in Add.data.selectData['roleId']" :label="option.departmentName" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="账号">
					<el-input v-model.trim="Add.data.form['userName']" disabled class="h-40 w-200" :maxlength="255" placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model.trim="Add.data.form['password']" class="h-40 w-200" :maxlength="255" placeholder="请输入密码"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitAdd('addform')" class="w-200">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog :title="Edit.config.title" :visible.sync="Edit.dialogFormVisible">
			<el-form ref="form" :model="Edit.data.form" :rules="Edit.config.rules" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.select">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.multipleSelect">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200" multiple>
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.input">
					<el-input v-model.trim="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="h-40 w-200" :maxlength="255"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Edit.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitEdit()">确 定</el-button>
			</div>
		</el-dialog>
		<!--查看账号-->
		<el-dialog title="查看账号" :visible.sync="accountDetail.dialogFormVisible" width="500px">
			<el-row :gutter="60" class="a_detail_row">
				<el-col :span="11" class="text_r">姓名</el-col>
				<el-col :span="12">{{accountDetail.realName}}</el-col>
			</el-row>
			<el-row :gutter="60" class="a_detail_row">
				<el-col :span="11" class="text_r">手机号</el-col>
				<el-col :span="12">{{accountDetail.mobile}}</el-col>
			</el-row>
			<el-row :gutter="60" class="a_detail_row">
				<el-col :span="11" class="text_r">角色名</el-col>
				<el-col :span="12">{{accountDetail.roleName}}</el-col>
			</el-row>
			<el-row :gutter="60" class="a_detail_row">
				<el-col :span="11" class="text_r">部门</el-col>
				<el-col :span="12" style="color: #409EFF;cursor: pointer;">{{accountDetail.departmentName}}</el-col>
			</el-row>
			<el-row :gutter="60" class="a_detail_row">
				<el-col :span="11" class="text_r">账号</el-col>
				<el-col :span="12">{{accountDetail.userName}}</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import pageModel from 'components/Common/page-model.vue'

	export default {
		components: {
			pageModel,
		},
		data() {
			return {
				accountDetail: {
					dialogFormVisible: false,
					realName: '',
					mobile: '',
					roleName: '',
					departmentName: '',
					userName: '',
					departmentId: '', //部门id 
				},
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							realName: '',
							mobile: '',
							roleId: '',
							password: '',
							departmentId: '',
							userName: ''
						},
						selectData: {
							roleId: [],
							departmentId: [],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '新建账号',
						form: {
							input: [{
									prop: 'realName',
									label: '姓名',
									placeholder: '请输入姓名',
								},
								{
									prop: 'mobile',
									label: '手机号',
									placeholder: '请输入手机号',
								},
								{
									prop: 'userName',
									label: '账号',
									placeholder: '请输入账号',
								},
								{
									prop: 'password',
									label: '密码',
									placeholder: '请输入密码',
								}
							],
							select: [{
								label: '角色名',
								prop: 'roleId',
								placeholder: '请选择角色名',
							}, {
								label: '部门',
								prop: 'departmentId',
								placeholder: '不可修改，由角色名决定',
							}]
						},
						rules: {
							realName: [{
								required: true,
								message: '请输入姓名'
							}, {
								min: 1,
								max: 30,
								message: '文字、字母1-30位'
							}],
							mobile: [{
								required: true,
								message: '请输入手机号'
							}],
							roleId: [{
								required: true,
								message: '请选择角色'
							}],
							password: [{
								required: true,
								message: '请输入密码'
							},{
								min: 1,
								max: 30,
								message: '字母、数字、下划线：6-15位'
							}],
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							accountId: '',
							realName: '',
							mobile: '',
							roleId: '',
							password: '',
							departmentId: '',
							userName: ''
						},
						selectData: {
							roleId: [],
							departmentId: []
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改账号',
						form: {
							input: [{
									prop: 'realName',
									label: '姓名',
									placeholder: '请输入姓名',
								},
								{
									prop: 'mobile',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '角色名',
								prop: 'roleId',
								placeholder: '请选择角色名',
							}]
						},
						rules: {
							realName: [{
								required: true,
								message: '请输入姓名'
							}, {
								min: 1,
								max: 30,
								message: '文字、字母1-30位'
							}],
							mobile: [{
								required: true,
								message: '请输入手机号'
							}],
							roleId: [{
								required: true,
								message: '请选择角色'
							}],
							password: [{
								required: true,
								message: '请输入密码'
							},{
								min: 1,
								max: 30,
								message: '字母、数字、下划线：6-15位'
							}],
						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [],
						search_select: [{
							name: 'roleId',
							placeholder: '角色名',
							size: 'large',
							multiple: false,
							filterable: false,
						}, {
							name: 'departmentId',
							placeholder: '部门',
							size: 'large',
							multiple: false,
							filterable: false,
						}]
					},
					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						photo: true,
						sort: {
							CreateDate: 'custom'
						},
						show: {
							prop: [
								'userName',
								'realName',
								'departmentName',
								'roleName',
							],
							items: [
								'账号',
								'姓名',
								'部门',
								'角色名',
							],
							width: []
						},
						operate: {
							detail: true,
							edit: true,
							deleteBtn: true, //删除
						}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},
				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							roleId: [],
							departmentId: []
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							roleId: '',
							departmentId: '',
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			//下拉框
			this.selectData();
			// 延迟绑定监听
			this.$watch('data.exchanged.search.limit', {
				deep: true,
				handler: function() {
					this.tableData()
				}
			})
			this.$watch('data.exchanged.search.page', {
				deep: true,
				handler: function() {
					_g.openGlobalLoading()
					this.tableData()
				}
			})
			//根据姓名 角色名自动生成 账号密码
			this.$watch('Add.data.form.realName', {
				deep: true,
				handler: function() {
					this.getUserName()
				}
			})
			this.$watch('Add.data.form.roleId', {
				deep: true,
				handler: function() {
					this.getUserName()
				}
			})
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/account/list?page=" + page + "&count=" + obj.limit + "&roleId=" +
					obj.roleId + "&departmentId=" + obj.departmentId).then(res => {
					this.data.received.table = res.data.accounts
					this.data.received.count = res.data.count
					_g.closeGlobalLoading();
				})
			},
			commitAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						that.apiPost("/api/backend/account/add", this.Add.data.form).then(res => {
							if(res.code == 200) {
								that.Add.dialogFormVisible = false;
								that.tableData()
							}
						})
					}
				});
			},
			searchBtn() {
				this.tableData();
			},
			//获取下拉框数据
			selectData() {
				let that = this;
				//角色
				this.apiGet("/api/dict/role/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.roleId = res.data.roles
						that.Add.data.selectData.roleId = res.data.roles
						that.Edit.data.selectData.roleId = res.data.roles
					}
				})
				//部门
				this.apiGet("/api/dict/department/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.departmentId = res.data.departments
						that.Add.data.selectData.departmentId = res.data.departments
						that.Edit.data.selectData.departmentId = res.data.departments
					}
				})
			},
			getUserName() {
				let that = this;
				if(that.Add.data.form.realName && that.Add.data.form.roleId) {
					that.apiPost("/api/backend/account/user-name/generate", {
						realName: that.Add.data.form.realName,
						roleId: that.Add.data.form.roleId
					}).then(res => {
						that.Add.data.form.userName = res.data.userName
						that.Add.data.form.password = res.data.password
					})
				}
			},
			checkDetail(row) {
				let that = this;
				//获取详情
				that.accountDetail.departmentName = row.departmentName;
				this.apiGet("/api/backend/account/detail?accountId=" + row.accountId).then(res => {
					if(res.code == 200) {
						that.accountDetail.realName = res.data.realName;
						that.accountDetail.mobile = res.data.mobile;
						that.accountDetail.roleName = res.data.roleName;
						that.accountDetail.userName = res.data.userName;
						that.accountDetail.departmentId = res.data.departmentId;
						that.accountDetail.dialogFormVisible = true;
					}
				})
			},
			resetPwd(row) {
				let that = this;
				that.$confirm('此操作将重置该账号密码, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.apiPost("/api/backend/account/password/init", {
						accountId: row.accountId
					}).then(res => {
						if(res.code == 200) {
							that.$message({
								type: 'success',
								message: '重置成功！'
							})
						}
					})
				});
			},
			forbidden(row) {
				let that = this;
				var type;
				if(row.status == 1) {
					type = 2;
				} else {
					type = 1;
				}
				that.apiPost("/api/backend/account/forbidden", {
					accountId: row.accountId,
					type: type
				}).then(res => {
					if(res.code == 200) {
						that.$message({
							type: 'success',
							message: '修改成功！'
						})
						that.tableData();
					}
				})
			},
			modify(row) {
				let that = this;
				this.Edit.data.form.accountId = row.accountId;
				this.apiGet("/api/backend/account/detail?accountId=" + row.accountId).then(res => {
					if(res.code == 200) {
						that.Edit.data.form.realName = res.data.realName;
						that.Edit.data.form.mobile = res.data.mobile;
						that.Edit.data.form.roleId = res.data.roleId;
						that.Edit.dialogFormVisible = true;
					}
				})
			},
			commitEdit() {
				this.apiPost("/api/backend/account/modify", this.Edit.data.form).then(res => {
					if(res.code == 200) {
						this.$message({
							type: 'success',
							message: '修改成功！'
						});
						this.Edit.dialogFormVisible = false;
						this.tableData();
					}
				})
			},
			deleteBtn(row) {
				let that = this;
				that.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.apiPost("/api/backend/account/remove", {
						accountId: row.accountId
					}).then(res => {
						if(res.code == 200) {
							that.$message({
								type: 'success',
								message: '删除成功'
							})
							that.tableData();
						}
					})
				}).catch(() => {

				});
			},
		},
		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
	
	.a_detail_row {
		line-height: 40px;
	}
	
	.text_r {
		text-align: right;
	}
	
	.text_l {
		text-align: left;
	}
</style>